@font-face
{
  font-family: 'Staatliches';
  font-weight: normal;
  font-style: normal;
  src: url('/font/Staatliches/Staatliches-Regular.ttf');
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

main {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: normal;
}

main a {
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

main a:hover {
  text-decoration-thickness: 2px;
}

.navbar__title {
  font-family: 'Staatliches';
  height: 32px;
  font-size: 32px;
  display: inline-flex;
  align-items: center;
}

.header-github-link:hover,
.header-npm-link:hover {
  opacity: 0.6;
}

.header-github-link::before,
.header-npm-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
}

.header-github-link {
  margin-right: 0.5rem;
}

.header-github-link::before {
  background: url("../../static/icon/github.svg") no-repeat;
}

html[data-theme='dark'] .header-github-link::before {
  background: url("../../static/icon/github_white.svg") no-repeat;
}

.header-npm-link::before {
  background: url("../../static/icon/npm.svg") no-repeat;
}

.view360-container {
  margin-bottom: 0.5rem;
}

.framework-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.framework-wrapper svg {
  margin-right: 0.25rem;
}

.demo-controls-orig-image {
  /*
   * Icon from tabler icons
   * https://github.com/tabler/tabler-icons
   *
   * tabler icons is licensed under the MIT license
   * https://github.com/tabler/tabler-icons/blob/master/LICENSE
   */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 8h.01'%3E%3C/path%3E%3Cpath d='M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v4.5'%3E%3C/path%3E%3Cpath d='M4 15l4 -4c.928 -.893 2.072 -.893 3 0l2 2'%3E%3C/path%3E%3Ccircle cx='18' cy='18' r='3'%3E%3C/circle%3E%3Cpath d='M20.2 20.2l1.8 1.8'%3E%3C/path%3E%3C/svg%3E");
}

.demo-viewer-modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: none;
  transition: background-color 250ms;
  background-size: 20px 20px;
  background-origin: content-box;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.demo-viewer-modal::before,
.demo-viewer-modal::after {
  content: "";
  margin: auto;
}

.demo-viewer-modal.visible {
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  /*
   * Icon from Google Material Icons
   * https://fonts.google.com/icons
   *
   * Material Design Icons is licensed under the Apache License 2.0
   * https://github.com/google/material-design-icons/blob/master/LICENSE
   */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z'/%3E%3C/svg%3E");
}

.demo-viewer-modal .content {
  display: none;
  max-width: calc(100% - 80px);
  color: white;
}

.demo-viewer-modal .content:not(:last-child) {
  margin-bottom: 20px;
}

.demo-viewer-modal.visible .content {
  display: inline-block;
}

.demo-controls-license {
  /*
   * Icon from tabler icons
   * https://github.com/tabler/tabler-icons
   *
   * tabler icons is licensed under the MIT license
   * https://github.com/tabler/tabler-icons/blob/master/LICENSE
   */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copyright' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cpath d='M14 9.75a3.016 3.016 0 0 0 -4.163 .173a2.993 2.993 0 0 0 0 4.154a3.016 3.016 0 0 0 4.163 .173'%3E%3C/path%3E%3C/svg%3E");
}

.view360-container.view360-vr-presenting .license-container {
  display: none;
}

.demo-option-subtitle {
  color: hsl(0, 0%, 55%);
  font-size: 23px;
}

.demo-hotspot {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: inline-flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  color: black;
  cursor: pointer;
}

.demo-hotspot:hover .demo-hotspot-bubble {
  display: inline-flex;
}

.demo-hotspot-bubble {
  display: none;
  position: absolute;
  bottom: 100%;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
}
